import React, { useEffect, useState } from "react";
import {
    Button,
    Row,
    Col,
    Image,
} from "antd";
import request from "../../utils/requests";
import {
    BrowserRouter as Router,
    Link,
} from "react-router-dom";

export default function Classify() {
    const [classify, setClassify] = useState([]);
    useEffect(async () => {
        const push = location.pathname.split("/").length - 1;
        const id = location.pathname.split("/")[push];
        const data = await request("/goods/classify", {
            method: "POST",
            data: { classify_id: id },
        });
        if (data.data.success) {
            setClassify([...data.data.query.data]);
        }
    }, []);
    return (
        <div className="wrapper">
            <h2 className="my-4"><img src="/public/homeimg/all.jpg" alt="" /></h2>
            <Row className="p-4 flex justify-center">
                {classify.map((item) => {
                    return <Col style={{ display: "block", maxWidth: "50%", padding: "0.5rem 0" }} key={item.id}>
                        <div className="mx-6">
                            <Link to={"/goodsDetails/" + item.id}>
                                <Image
                                    src={"../avatars/" + item.photo1}
                                    alt=""
                                    width={400}
                                    height={400}
                                    title={item.label}
                                    fallback=""
                                />
                            </Link>
                            <p className="my-2">
                                {item.name}
                            </p>
                            <Button className="m-auto" danger ghost>
                                ￥{item.price}
                            </Button>
                        </div>
                    </Col>
                })}
            </Row>
        </div>
    );
}
